<template>
    <DataOverview :overview-data="overviewData"></DataOverview>
    <div class="activity-header">
        <el-tabs v-model="active">
            <el-tab-pane label="活动数据" :name="1">
                <BrokenLineVue v-if="active === 1" />
            </el-tab-pane>
            <el-tab-pane label="用户数据" :name="2">
                <UserData v-if="active === 2" />
            </el-tab-pane>
            <el-tab-pane label="奖品数据" :name="3">
                <PrizeData v-if="active === 3" />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
// 数据概览组件
import DataOverview from './components/DataOverview.vue';
// 折线图组件
import BrokenLineVue from './components/BrokenLine.vue';
// 用户数据组件
import UserData from './components/UserData.vue';
// 奖品数据组件
import PrizeData from './components/PrizeData.vue';
// 接口
import { overview } from '@/api/smartMarketing/drainage/groupFission';

const route = useRoute();
const active = ref(1);
const overviewData = ref<any>(null);
const { id } = route.query;
// 获取数据
const initData = () => {
    overview({ id }).then((resp: any) => {
        overviewData.value = resp;
    });
};
onMounted(() => {
    initData();
});
</script>
<style lang="scss" scoped>
:deep(.el-tabs__header) {
    margin: 0;
}

:deep(.dialog-box) {
    .el-dialog__footer,
    .el-dialog__header {
        border: none;
    }
}

.activity-header {
    margin-top: 16px;
    padding: 3px 24px 17px;
    background: #fff;
    border: 1px solid #eaeaea;

    :deep {
        .el-tabs__ {
            &header {
                margin: 0;
                margin: 0 -24px;
            }

            &nav-scroll {
                padding: 0 24px;
            }

            &item {
                height: 56px;
                line-height: 56px;
                font-size: 16px;
                font-family: PingFangSC-Medium, 'PingFang SC';
                font-weight: 500;
            }
        }
    }
}
</style>
